<template>
  <a-modal
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="600"
  >
    <template #title> 条件类型详情 </template>
    <div class="index">
      <a-form ref="formRef" :model="form" :style="{ width: '600px' }">
        <a-form-item field="typeName" label="名称">
          <a-input v-model="form.typeName" @change="checkUnique" />
        </a-form-item>
        <a-form-item field="matchValueType" label="匹配值类型">
          <a-radio-group v-model="form.matchValueType">
            <a-radio value="text">文本</a-radio>
            <a-radio value="number">数字</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import * as api from '@/apis/approve/index';
import type { ConditionType } from '@/apis/approve/type';
import { useVModel } from '@vueuse/core';

const props = withDefaults(
  //参数说明
  defineProps<{
    data: ConditionType;
    visible: boolean;
  }>(),
  {
    visible: false
  }
);
const emit = defineEmits(['update:visible', 'save']);
const form = useVModel(props, 'data', emit);
const modalVisible = useVModel(props, 'visible', emit);
const handleOk = () => {
  emit('save');
  emit('update:visible', false);
};
const handleCancel = () => {
  emit('update:visible', false);
};

const formRef = ref();
const checkUnique = async () => {
  const { typeName } = form.value;
  const res = await api.conditionTypeCheck({ typeName });
  if (res?.code === 400) {
    formRef.value.setFields({
      name: { status: 'error', message: res.msg }
    });
  }
};
</script>
<style lang="less" scoped>
.index {
  display: flex;
}
</style>
